
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* Polymer-UI Elements
*
* @module Polymer-UI Elements
*/  
/**
 * polymer-ui-icon is a 24x24 glyph expressed as a background-image.
 *
 * Example:
 *
 *     <polymer-ui-icon src="star.png"></polymer-ui-icon>
 *
 * Optionally can use other size like 32x32 by setting the attribute "size" to "32":
 *
 *     <polymer-ui-icon src="big_star.png" size="32"></polymer-ui-icon>
 *
 * Polymer includes an icon set.  The property "icon" can be used
 * to specify which icon to use.
 *
 * Example:
 *
 *     <polymer-ui-icon icon="menu"></polymer-ui-icon>
 *
 * @class polymer-ui-icon
 */
-->
<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">

<polymer-element name="polymer-ui-icon" extends="polymer-ui-theme-aware" attributes="src size index icon">
  <template>
    <link rel="stylesheet" href="polymer-ui-icon.css">
  </template>
  <script>
    (function() {
      Polymer('polymer-ui-icon', {
        /**
         * The URL of an image for the icon.
         *
         * @attribute src
         * @type string
         * @default ''
         */
        src: '',
        /**
         * Specifies the size of the icon.
         *
         * @attribute size
         * @type string
         * @default 24
         */
        size: 24,
        /**
         * Specifies the icon from the Polymer icon set.
         *
         * @attribute icon
         * @type string
         * @default ''
         */
        icon: '',
        bx: 0,
        by: 0,
        ready: function() {
          this.sizeChanged();
        },
        sizeChanged: function() {
          this.style.width = this.style.height = this.size + 'px';
        },
        iconChanged: function() {
          this.index = this.icon in icons ? icons[this.icon] : -1;
        },
        indexChanged: function() {
          this.classList.add('polymer-ui-icons');
          this.by = -this.size * this.index;
          this.updateIcon();
        },
        srcChanged: function() {
          this.classList.remove('polymer-ui-icons');
          this.style.backgroundImage = 'url(' + this.src + ')';
          this.updateIcon();
        },
        themeChanged: function(old) {
          this.style.backgroundPosition = '';
          this.classList.switch(old, this.theme);
          this.asyncMethod('updateIcon');
        },
        updateIcon: function() {
          if (this.src) {
            this.style.backgroundPosition = 'center';
          } else {
            this.bx = parseFloat(getComputedStyle(this).backgroundPosition.split(' ').shift());
            this.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
          }
        }
      });
      var icons = {
        drawer: 0,
        menu: 1,
        search: 2,
        dropdown: 3,
        close: 4,
        add: 5,
        trash: 6,
        refresh: 7,
        settings: 8,
        dialog: 9
      };
    })();
  </script>
</polymer-element>
